<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!--<canvas id="example" style="width:400px" />
    <br>-->

    <img data-smiles="[H]C([H])([H])[H]" data-smiles-options="{ 'width': 400, 'height': 400 }"
        data-smiles-weights="1,2,1,1,1" />
    <br>
    <img data-smiles="CNO" data-smiles-options="{ 'width': 400, 'height': 400 }" data-smiles-weights="-1.0,0.5,1.0" />
    <br>
    <svg data-smiles="C=CCBr.[Na+].[I-]>CC(=O)C>C=CCI.[Na+].[Br-]  __{'textBelowArrow': '90%'}__"
        data-smiles-reactant-weights="0,0,0,1;-0.5;0"
        data-smiles-reaction-options="{ 'weights': { 'normalize': false } }" />
    <br />
    <h3>3.5.1</h3>
    <p>91.20679497718811%</p>
    <p>9.04025392736412</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="5.568667821586132,5.568667821586132,4.211033038794994,4.211033038794994,1.9716600105166435,-0.31391315907239914,0.10135398060083389,-0.31391315907239914,1.9716600105166435;0.0"
        data-smiles-product-weights="0.0;0.9209847673773766,1.1039903536438942,1.1039903536438942,0.9209847673773766,0.27234502881765366,-0.07642021775245667,-0.3023260831832886,-0.07642021775245667,0.27234502881765366"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.5.2</h3>
    <p>1.7999239265918732%</p>
    <p>6.775475915196239</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="2.4863617215305567,2.4863617215305567,1.6545372400432825,1.6545372400432825,0.3162923529744148,-0.2169383317232132,0.15761199593544006,-0.2169383317232132,0.3162923529744148;0.0"
        data-smiles-product-weights="0.0;2.1004358590580523,2.228224864695221,2.228224864695221,2.1004358590580523,0.804075411055237,0.8909893557429314,0.2012638822197914,0.8909893557429314,0.804075411055237"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.4.11</h3>
    <p>0.8594788610935211%</p>
    <p>4.826010601330779</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="2.255495126126334,2.255495126126334,1.9046482394915074,1.9046482394915074,0.5224495406728238,-0.2750773746520281,-0.08972133696079254,-0.2750773746520281,0.5224495406728238;0.0"
        data-smiles-product-weights="0.0;0.8742440678179264,0.8635604092851281,0.8635604092851281,0.8742440678179264,0.25055277720093727,-0.09465856477618217,-0.4786772280931473,-0.09465856477618217,0.25055277720093727"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.4.13</h3>
    <p>0.7027701940387487%</p>
    <p>6.4919181115596984</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="1.4803020348772407,1.4803020348772407,1.2679847916588187,1.2679847916588187,-0.23050174955278635,-0.4111455464735627,-0.4008752340450883,-0.4111455464735627,-0.23050174955278635;0.0"
        data-smiles-product-weights="0.0;2.250218763947487,2.3190112188458443,2.3190112188458443,2.250218763947487,1.4882225841283798,0.4799361303448677,-0.4749370589852333,0.4799361303448677,1.4882225841283798"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.4.21</h3>
    <p>0.5557861644774675%</p>
    <p>4.058619865162655</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="0.621323898434639,0.621323898434639,0.5755838192999363,0.5755838192999363,0.0845581479370594,-0.34132906049489975,-0.10087905824184418,-0.34132906049489975,0.0845581479370594;0.0"
        data-smiles-product-weights="0.0;2.533894283697009,2.7000120412558317,2.7000120412558317,2.533894283697009,1.7092902194708586,0.8011920135468245,-0.044080885127186775,0.8011920135468245,1.7092902194708586"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.4.22</h3>
    <p>0.4248321056365967%</p>
    <p>4.327583368080468</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="1.0066370889544487,1.0066370889544487,0.6437747702002525,0.6437747702002525,0.30911869928240776,0.002586711198091507,-0.01548897847533226,0.002586711198091507,0.30911869928240776;0.0"
        data-smiles-product-weights="0.0;2.6256029878131812,2.585277495192713,2.585277495192713,2.6256029878131812,2.0387927268020576,0.9681069229118293,0.17175130288524088,0.9681069229118293,2.0387927268020576"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>2.4.1</h3>
    <p>0.3347141435369849%</p>
    <p>2.165202335756021</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="0.31968790106475353,0.31968790106475353,0.7849469464272261,0.7849469464272261,1.0582171399146318,-0.13469904474914074,0.22730568051338196,-0.13469904474914074,1.0582171399146318;0.0"
        data-smiles-product-weights="0.0;0.6764547685161233,0.6877827113494277,0.6877827113494277,0.6764547685161233,0.7081356178969145,1.0989683624356985,1.4202498029917479,1.0989683624356985,0.7081356178969145"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>4.2.1</h3>
    <p>0.22720147389918566%</p>
    <p>0.5746330366981738</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="1.9883788004517555,1.9883788004517555,1.2661006823182106,1.2661006823182106,0.32201022654771805,0.0023333653807640076,0.1254565343260765,0.0023333653807640076,0.32201022654771805;0.0"
        data-smiles-product-weights="0.0;-1.9292735327035189,-1.1248230803757906,-1.1248230803757906,-1.9292735327035189,-1.0596206951886415,-0.9507076572626829,-0.6000713668763638,-0.9507076572626829,-1.0596206951886415"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>1.14.14</h3>
    <p>0.22348009515553713%</p>
    <p>2.1001352256257633</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="1.8126392140984535,1.8126392140984535,1.7461679503321648,1.7461679503321648,1.5042927265167236,0.8065290674567223,0.6587362550199032,0.8065290674567223,1.5042927265167236;0.0"
        data-smiles-product-weights="0.0;-0.4415612886659801,0.042914353776723146,0.042914353776723146,-0.4415612886659801,-0.30661936197429895,-0.21553208399564028,-0.770422120578587,-0.21553208399564028,-0.30661936197429895"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />
    <h3>3.4.24</h3>
    <p>0.19986999686807394%</p>
    <p>3.450735266691254</p>
    <svg data-smiles="NC(=O)[C@@H]1CCCCN1.O>>N.O=C(O)[C@@H]1CCCCN1"
        data-smiles-reactant-weights="0.7125457967631519,0.7125457967631519,0.460960044991225,0.460960044991225,0.02113536698743701,-0.3274945211596787,-0.19955582963302732,-0.3274945211596787,0.02113536698743701;0.0"
        data-smiles-product-weights="0.0;1.9365772265009582,1.8945031533949077,1.8945031533949077,1.9365772265009582,1.3848620313219726,0.773098576348275,0.22142148343846202,0.773098576348275,1.3848620313219726"
        data-smiles-reaction-options="{ 'weights': { 'normalize': true } }" />

    <script src=" ../dist/smiles-drawer.min.js"></script>
    <script>
        {
            {/*  let sd = new SmiDrawer();
        sd.draw('OC(C(=O)O[C@H]1C[N+]2(CCCOC3=CC=CC=C3)CCC1CC2)(C1=CC=CS1)C1=CC=CS1', '#example', 'light', null, null, [1, 1, 1, 1, 1, 1])  */}
        }
        SmiDrawer.apply();
    </script>
</body>

</html>